import BaseGroup from '@/components/js/BaseGroup'
import { addEvent, removeEvent } from '@/plugins/dom'
export default class AppearInSequenceAnim extends BaseGroup {
  constructor() {
    super();
    //子类覆盖
    this.sequenceComps = [];
    this.sequenceCompMap = null;
    this.sequenceCompGsaps = [];
    this.sequenceCompGsapIndex = 0;
    this.gsap = null;
  }

  start() {
    // let injectJsClassObj = {
    //   "08b18e9a-8354-43eb-9532-9742752ab422":{"type":"show","delayTime":2,"duraion":1,"displayCompId":"0c851506-f75f-4a4c-9dd6-b5b04601b46a"},
    //   "0c851506-f75f-4a4c-9dd6-b5b04601b46a":{"type":"click","displayCompId":"205d7acd-231f-4489-9dd1-adcaecfc3364"},
    //   "205d7acd-231f-4489-9dd1-adcaecfc3364":{"type":"show","delayTime":2,"duraion":1,"displayCompId":"064db51e-1133-400b-bbc4-b91eebb00814"},
    //   "064db51e-1133-400b-bbc4-b91eebb00814":{"type":"show","delayTime":2,"duration":0.1},
    //   "gsap":{"delayTime":2}  //配置这个参数加载 gsap js文件
    // }
    let injectJsClassObj = _.cloneDeep(this.item.interactionData.injectJsClassObj);

    this.gsap = injectJsClassObj.gsap;
    delete injectJsClassObj.gsap;

    let sequenceCompMap = this.sequenceCompMap = injectJsClassObj;
    _.forEach(sequenceCompMap, (obj, compId) => {
      let sequenceCompData = this.componentMap[compId];
      this.sequenceComps.push(sequenceCompData);
      sequenceCompData.commonAttr.isVisible = false;

      if(obj.type == "click"){
        let img = sequenceCompData.vueContainer.$refs.img;
        this.onImgClick = this.onImgClick.bind(this);
        addEvent(img, "click", this.onImgClick);
      }
      // let dom = sequenceCompData.vueContainer.$el;
      // window.gsap.to(dom, { opacity: 0, duration: 0.1 });
    })
    this.sequenceComps = _.sortBy(this.sequenceComps, (compData) => { return compData.commonAttr.itemIndex; });

    this.setGaspAnimAttr();
  }

  setGaspAnimAttr(){
    _.forEach(this.sequenceComps, (compData) => {
      let obj = this.sequenceCompMap[compData.id];
      if(obj.type == "show"){
        this.sequenceCompGsaps.push({compData, obj});
      }
    })
    
    window.setTimeout(() => {
      let compObjData = this.sequenceCompGsaps[0];
      let obj = compObjData.obj;//{type,delayTime,displayCompId}
      let dom = compObjData.compData.vueContainer.$el;
      compObjData.compData.commonAttr.isVisible = true;
      this.addAction(obj, dom);
    }, this.gsap.delayTime * 1000)
  }

  addAction(obj, dom){
    window.gsap.to(dom, {duration: obj.duration, delay: obj.delayTime, opacity: 1, onComplete: () => {
      this.sequenceCompGsapIndex++;
      let displayCompId = obj.displayCompId;
      if(displayCompId){
        let obj = this.sequenceCompMap[displayCompId];
        let compData = this.componentMap[displayCompId];
        compData.commonAttr.isVisible = true;
        let dom = compData.vueContainer.$el;
        this.addAction(obj, dom);
      }
    }})
  }

  onImgClick(e){
    e.stopPropagation();
    e.stopImmediatePropagation();
    
    let img = e.currentTarget;
    let compId = img.parentElement.id;
    // let compData = this.componentMap[compId];
    // let imgVueClass = compData.vueContainer;
    
    let displayCompId = this.sequenceCompMap[compId].displayCompId;
    let obj = this.sequenceCompMap[displayCompId];
    let compData = this.componentMap[displayCompId];
    compData.commonAttr.isVisible = true;
    let dom = compData.vueContainer.$el;
    this.addAction(obj, dom);

    removeEvent(img, "click", this.onImgClick);
    let jumpUrl = 'appearInSequence'
    let comType = "click"
    let wModule = "anim"
    this.onPostStatics(e, { comType, wModule,  jumpUrl })
  }

  destroy(){
    super.destroy();

    this.sequenceComps = null;
    this.sequenceComps = null
    this.sequenceCompMap = null;
    this.sequenceCompGsaps = null
    this.sequenceCompGsapIndex = 0;
    this.gsap = null;
  }
}
